<template>
  <div class="tancire-video">
    <div class="tv-left">
      <condition-card title="类型" @change="handleTypeChange" type="0"/>
    </div>
    <div class="tv-right">
      <div class="tv-right-category">
        <category-card @change="handleQueryData" :pid="2"/>
      </div>
      <div class="tv-right-body">
        <source-table @modify="handleModify" :data="sourceList" />
      </div>
      <div class="tv-right-page">
        <el-pagination class="tc-page-source" background layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>

    <el-dialog
        title="开发提示"
        v-model="openHelp"
        style="background-color: #ffffff"
        width="30%">
      <help />
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="openHelp = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup name="TancireDisks">
import ConditionCard from "../video/node/conditionCard.vue";
import CategoryCard from "../video/node/categoryCard.vue";
import SourceTable from "../video/node/sourceTable.vue";
import Help from "@/components/Help/index.vue"

import {getResourceList, getOpenAuthCode} from "@/api/source.js";

const {proxy} = getCurrentInstance();

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const playUrl = import.meta.env.VITE_APP_PLAY_API;
const envName = import.meta.env.VITE_APP_ENV;

const router = useRouter();

const condition = ref('');
const queryParam = ref({
  pageNum: 1,
  pageSize: 20,
  categoryId: 7,
});


const sourceList = ref([]);
const total = ref(0);

const openHelp = ref(false);

/** 查询资源列表数据 */
const getSourceList = () => {
  getResourceList(queryParam.value).then(res => {
    if (res.code === 200) {
      sourceList.value = res.rows;
      total.value = res.total;
    }
  })
}

/** 类型变化触发 */
const handleTypeChange = (type) => {
  if (type) {
    queryParam.value.resourceTags = type;
  } else {
    queryParam.value.resourceTags = '';
  }
  getSourceList();
}

/** 年度变化触发 */
const handleYearChange = (year) => {
  if (year) {
    queryParam.value.resourceDay = year;
  } else {
    queryParam.value.resourceDay = '';
  }
  getSourceList();
}

/** 分类变化触发 */
const handleQueryData = (categoryId) => {
  queryParam.value.categoryId = categoryId;
  getSourceList();
}

const handleModify = (row, type) => {
  if (type === 'view') {
    router.push({
      path: '/video-render',
      query: {
        resourceId: row.id
      }
    })
  } else if (type === 'download') {
    // 获取临时播放链接
    getOpenAuthCode(row.id).then(res => {
      if (res.code === 200) {
        if (res.data.authCode) {
          let basePath = baseUrl;
          if (envName === 'development') {
            basePath = playUrl
          }
          // autoPlay.value = true;
          const downloadPath = `${basePath}/open/client/sources/common/download/${res.data.authCode}`;

          // 创建一个临时的a标签用于下载
          const link = document.createElement('a');
          link.href = downloadPath;
          // 触发点击事件
          document.body.appendChild(link);
          link.click();
          // 清理：移除临时创建的a标签和释放Blob对象的URL
          document.body.removeChild(link);
        }
      }
    })
  } else {
    openHelp.value = true;
  }
}

</script>

<style lang="scss" scoped>
.tancire-video {
  height: calc(100vh - 40px);
  overflow: hidden;
  background-color: var(--tc-video-background);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;

  .tv-left {
    width: 300px;
    height: 100%;
    overflow: auto;
    background: #292520;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .tv-right {
    flex: 1;
    width: 0;
    height: 100%;
    overflow: auto;

    &-category {
      position: relative;

      &-switch {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
      }
    }

    &-body {
      padding: 20px;
    }

    &-page {
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

  }


}
</style>

